<template>
  <div class="department-model">
    <div class="dialog">
      <el-dialog
        :title="dialog.title"
        :visible.sync="dialog.visible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <el-form
          class="form"
          :model="equipmentModel"
          :rules="rules"
          label-position="right"
          label-width="100px"
          ref="form"
        >
          <el-form-item label="设备型号类型" prop="equipmentTypeID">
            <el-cascader
              v-model="equipModel"
              :props="equipProps"
              clearable
              :options="options"
              @change="equipChange">
          </el-cascader>
          </el-form-item>
          <el-form-item label="设备型号名称" prop="name">
            <el-input v-model="equipmentModel.name" />
          </el-form-item>
          <el-form-item label="设备型号描述" prop="description">
            <el-input type="textarea" v-model="equipmentModel.description" />
          </el-form-item>
          <el-form-item label="设备型号图片" prop="picture">
            <el-input v-model="equipmentModel.picture" />
          </el-form-item>
          <el-form-item label="型号图片类型" prop="pictureMime">
            <el-input v-model="equipmentModel.pictureMime" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="header">
      <el-form :inline="true" size="small" label-width="100px">
        <el-form-item label="设备型号名称">
          <el-input v-model="search.name" placeholder="" />
        </el-form-item>
        <el-form-item label="设备型号类型">
          <el-cascader
              v-model="models"
              :props="equipProps"
              clearable
              :options="options"
              @change="equipChange">
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getDatas(pageNo, pageSize)">查询</el-button>
          <el-button type="primary" size="mini" @click="addData">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-card>
        <el-table ref="eltable" style="width: 100%" row-key="id" border 
        :data="datas" :header-cell-style="{ 'background-color': '#EEEEEE' }">
          <el-table-column prop="equipmentTypeID" label="设备型号类型">
            <template slot-scope="scope">
              {{ getEquipType(scope.row.equipmentTypeID) }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="设备型号名称"></el-table-column>
          <el-table-column prop="description" label="设备型号描述"></el-table-column>
          <el-table-column prop="picture" label="设备型号图片"></el-table-column>
          <el-table-column prop="pictureMime" label="型号图片类型"></el-table-column>
          <el-table-column prop="statusID" label="设备型号状态">
            <template slot-scope="scope">
              {{ statuses[scope.row.statusID].label }}
            </template></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="showDialog(scope.row)" type="text" size="small">修改</el-button>
              <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :total="total"
            :current-page.sync="pageNo"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </el-card>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import {
  getEquipmentModels,
  addEquipmentModel,
  updateEquipmentModel,
  deleteEquipmentModel,
} from "@/api/equipment-model";

export default {
  name: "equipmentModel",
  data() {
    return {
      dialog: {
        title: "",
        visible: false,
        update: false,
      },
      statuses: [
        { key: 0, label: "停用" },
        { key: 1, label: "活动" },
        { key: 2, label: "草稿" },
        { key: 3, label: "审批中" },
        { key: 5, label: "由活动状态停用" },
        { key: 6, label: "由草稿状态停用" },
        { key: 7, label: "由审批状态停用" },
      ],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      search: {
        name: '',
        typeid: null
      },
      models: [],
      equipModel: [],
      equipProps: {
        multiple: false,
        lazy: false,
        checkStrictly: true,
      },
      datas: [],
      equipmentModel: {
        id: null,
        equipmentModelID: null,
        equipmentTypeID: null,
        name: "",
        description: "",
        picture: null,
        pictureMime: null,
        statusID: 1,
        employeeID_Update: null,
      },
      rules: null,
    };
  },
  async created() {
    this.getDatas(this.pageNo, this.pageSize);
    this
    await this.$store.dispatch("equipment/getEquipTypes", { page: 0, size: 0 })
  },
  computed: {
    options() {
      return this.$store.state.equipment.options
    },
    equipTypes() {
      return this.$store.state.equipment.equip_types
    },
  },
  destroyed() {},
  methods: {
    getDatas(pageNo, pageSize) {
      getEquipmentModels({ name: this.search.name, typeid: this.search.typeid, page: pageNo, size: pageSize })
        .then((res) => {
          this.datas = res.data;
          this.total = res.count;
          Promise.resolve();
        })
        .catch((err) => {
          Promise.reject(err);
        });
    },
    addData() {
      this.dialog.title = "添加型号";
      this.dialog.visible = true;
      this.dialog.update = false;
      this.equipModel = [];
      this.equipmentModel = {
        id: null,
        equipmentModelID: null,
        equipmentTypeID: null,
        name: "",
        description: "",
        picture: null,
        pictureMime: null,
        statusID: 1,
        employeeID_Update: this.$store.getters.uid,
      };
    },
    showDialog(row) {
      this.dialog.title = "修改型号";
      this.dialog.visible = true;
      this.dialog.update = true;
      this.equipModel = this.getModel(row.equipmentTypeID);
      this.equipmentModel = {
        id: row.id,
        equipmentModelID: row.equipmentModelID,
        equipmentTypeID: row.equipmentTypeID,
        name: row.name,
        description: row.description,
        picture: row.picture,
        pictureMime: row.pictureMime,
        statusID: row.statusID,
        employeeID_Update: this.$store.getters.uid,
      };
    },
    onDelete(row) {
      this.$confirm("是否删除?", "提示信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((action) => {
        if (action === "confirm") {
          deleteEquipmentModel({ ids: row.equipmentModelID })
          .then((res) => {
            this.$message({
              message: res.message,
              type: "success",
            });
            Promise.resolve();
            this.getDatas(this.pageNo, this.pageSize);
          });
        }
      });
    },
    cancelClick() {
      this.dialog.visible = false;
    },
    confirmClick() {
      if (!this.dialog.update) {
        addEquipmentModel(this.equipmentModel)
        .then((res) => {
          this.dialog.visible = false;
          this.$message({
            message: res.message,
            type: "success",
          });
          Promise.resolve();
          this.getDatas(this.pageNo, this.pageSize);
        });
      } else {
        updateEquipmentModel(this.equipmentModel)
        .then((res) => {
          this.dialog.visible = false;
          this.$message({
            message: res.message,
            type: "success",
          });
          Promise.resolve();
          this.getDatas(this.pageNo, this.pageSize);
        });
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handlePageChange(val) {
      this.pageNo = val;
      this.getDatas(this.pageNo, this.pageSize);
    },
    equipChange(val) {
      if (val && val.length > 0) {
        let id = val[val.length - 1]
        this.search.typeid = id
        this.equipmentModel.equipmentTypeID = id
      }
    },
    getModel(id) {
      let model = [];
      let isFind = 0;
      const func = (id, arr, h) => {
        arr.forEach(e => {
          if (isFind) {
            return;
          }
          while (model.length > h) {
            model.pop();
          }
          if (e.value == id) {
            isFind = 1;
            model.push(e.value);
            return;
          } else if (e.children) {
            model.push(e.value);
            func(id, e.children, h + 1);
          }
        })
      }
      func(id, this.options, 0);
      return model;
    },
    getEquipType(id) {
      if (!this.equipTypes)
        return ''
      for (let i = 0; i < this.equipTypes.length; i++)
      {
        if (this.equipTypes[i].equipmentTypeID == id)
          return this.equipTypes[i].name
      }
      return ''
    }
  },
};
</script>

<style lang="scss" scoped>
.department-model {
  width: 100%;
  padding: 30px;
  .header {
    margin-bottom: 20px;
  }
  .content {
    margin-bottom: 20px;
  }
  .pagination {
    margin-top: 20px;
  }
}
</style>